<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title:hover {
            background-color: #ddd;
        }
        .delete{
            display: none;
        }
        .title:hover .delete{
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="div">
        <div v-for="(ques, index) in questionList">
            <h3 class="title">{{index+1}}.{{ques.title}}
                <span class="delete"><a href="#">删除</a></span>
            </h3>
            <ul>
                <label v-if="ques.type === 'text'">
                    <input :type="ques.type" :name="ques.name" v-model="ques.answer">
                </label>
                <label v-else-if="ques.type === 'radio' ">
                    <li v-for="opt in  ques.options"> <input :value="opt.value" :type="ques.type" :name="ques.name"
                            v-model="ques.answer">{{opt.label}}
                    </li>
                </label>
            </ul>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp(
            {
                data: function () {
                    return {
                        questionList: [
                            {
                                title: "请问你的姓名是?",
                                type: "text",
                                name: "username",
                                answer: ""
                            }
                            ,
                            {
                                title: "请问你的性别是?",
                                type: "radio",
                                name: "sex",
                                answer: "",
                                options: [
                                    { value: "male", label: "男" },
                                    { value: "female", label: "女" },
                                    { value: "unknown", label: "未知" }
                                ]
                            }
                        ]
                    }

                }
            }


        ).mount('#div');
    </script>

</body>

</html>